.content {
  @apply relative;
  border-radius: 0 !important;
  width: 21.88vw;
  min-width: 18.75rem;

  .posterBodyImg {
    @apply absolute left-0 top-0 z-1;
  }

  .posterBody {
    @apply relative w-full bg-black;

    .img {
      @apply w-full h-auto object-cover border-0 outline-0;
    }

    .qrcode {
      @apply absolute;
      right: 0.4rem;
      bottom: 0.32rem;
      box-sizing: content-box;
      border: 3px solid #f1f1f1;
      width: 3rem !important;
      height: 3rem !important;
    }
  }

  .close {
    @apply text-base text-white absolute right-5 top-5 cursor-pointer z-2;
  }

  .btnGroup {
    @apply flex w-full;
    margin-top: 1.875rem;

    .btn {
      @apply flex-1 text-base font-semibold text-white cursor-pointer whitespace-nowrap;
      padding: 0.625rem 0;
      border-radius: 2.083vw;

      &:nth-child(1) {
        @apply bg-theme mr-5;
      }

      &:nth-child(2) {
        background: #e7511d;
      }
    }
  }
}

@media screen and (min-width: 767px) and (max-width: 97.5rem) {
  .content {
    .posterBody {
      .qrcode {
        width: 3rem !important;
        height: 3rem !important;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .content {
    width: calc(100vw - 7.5rem);
    min-width: 0;

    .posterBody {
      border-width: 0.125rem;

      .qrcode {
        width: 2.4rem !important;
        height: 2.4rem !important;
      }
    }

    .close {
      @apply text-sm right-3 top-3;
    }

    .btnGroup {
      .btn {
        @apply text-base;
        padding: 0.375rem 0;
        border-radius: 1.25rem;
      }
    }
  }
}
